<template>
  <div class="pc-banner flex-center" :style="`background-image:url(${bg_image})`">
    <div class="middle-content">
      <div class="search-box">
        <h1>{{$t('home.title')}}</h1>
        <div class="search-component">
          <input
            type="text"
            class="search-input"
            :placeholder="$t('home.keyword')"
            v-model="Value"
            @keyup.enter="search"
          />
          <div class="search-btn" @click="search">{{$t('home.search')}}</div>
        </div>
      </div>
      <!-- <chain-info></chain-info> -->
    </div>
  </div>
</template>
<script>
// import ChainInfo from "./ChainInfo";
import search from "@/mixins/search.js";
export default {
  mixins: [search],
  computed: {
    bg_image() {
      return require(`../../../assets/img/logo${process.env.VUE_APP_HOME_BACKGROUND}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.pc-banner {
  height: 663px;
  min-width: 1250px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  // background: $banner_bg;
  // overflow: hidden;
  .search-box {
    width: 729px;
    margin: 200px auto 0;
    text-align: center;
    h1 {
      font-size: 53px;
      // font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: $white;
      line-height: 74px;
    }
    .search-component {
      margin-top: 41px;
      position: relative;
      .search-input {
        width: 729px;
        height: 50px;
        background: $white;
        border-radius: 39px;
        border: none;
        font-size: 16px;
        padding: 0 150px 0 22px;
        color: #838b9e;
      }
      .search-btn {
        position: absolute;
        right: 3px;
        top: 3px;
        width: 132px;
        height: 44px;
        line-height: 44px;
        background: linear-gradient(
          90deg,
          rgba(56, 146, 244, 1) 0%,
          rgba(26, 89, 229, 1) 100%
        );
        border-radius: 39px;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: $white;
        cursor: pointer;
        transition: 0.3s;
      }
      .search-btn:hover {
        opacity: 0.9;
      }
      .search-btn:active {
        opacity: 1;
      }
    }
  }
  .middle-content {
    display: inline-block;
    height: 663px;
  }
  .middle-content {
    position: relative;
    width: 1200px;
    flex-shrink: 0;
  }
}
</style>

